
{extend name='public/base' /}

{block name="css"}

<style>
    .carousel-control {
        width: 45px;
        height: 45px;
        line-height: 55px;
        border-radius: 45px;
        background: transparent;
        cursor: pointer;
        z-index: 100;
    }

    #prev-cover {
        position: absolute;
        top: 48%;
        left: 8px;
    }

    #next-cover {
        position: absolute;
        top: 48%;
        right: 8px;;
    }

    #prev-cover i {
        margin-right: 3px;
    }

    #next-cover i {
        margin-left: 3px;
    }

    .carousel-control:hover {
        background-color: rgba(0, 0, 0, .4);
    }

    .carousel-control i {
        color: #fff;
        font-size: 2.4rem;
    }
</style>
{/block}

{block name="p_header"}
<div class="carousel carousel-slider center index-cover" data-indicators="true" style="margin-top: -64px; height: 866px;">

    <div class="carousel-item red white-text bg-cover about-cover active" style="z-index: 0; opacity: 1; visibility: visible; transform: translateX(0px) translateX(0px) translateX(0px) translateZ(0px);">
        <div class="container">
            <div class="row">
                <div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
                    <div class="brand">
                        <div class="title center-align">
                            {$config.site.site_home_desc}
                        </div>
                        <div class="description center-align">
                            <span id="subtitle"></span><span class="typed-cursor typed-cursor--blink">|</span>
                            <script src="__FJS__/typed.js"></script>
                            <script>
                                var typed = new Typed("#subtitle", {
                                    strings: eval('{:json_encode($dujitang)}'),
                                    startDelay: 300,
                                    typeSpeed: 100,
                                    loop: true,
                                    backSpeed: 50,
                                    showCursor: true
                                });
                            </script>

                        </div>
                    </div>
                </div>
            </div>

            <script>
                // 每天切换 banner 图.  Switch banner image every day.
                var bannerUrl ="{$bannar_background}";
                $('.bg-cover').css('background-image', 'url(' + bannerUrl + ')');
            </script>

            <div class="cover-btns">
                <a href="#indexCard" class="waves-effect waves-light btn">
                    <i class="fa fa-angle-double-down"></i>开始阅读
                </a>
            </div>
            <!--    <div class="cover-social-link">
                    <a href="https://gitee.com/luckygyl" class="tooltipped" target="_blank" data-tooltip="访问我的Gitee"
                       data-position="top" data-delay="50">
                        <i class="fab fa-github"></i>
                    </a>
                    <a href="mailto:jackhhy520@qq.com" class="tooltipped" target="_blank" data-tooltip="邮件联系我"
                       data-position="top" data-delay="50">
                        <i class="fas fa-envelope-open"></i>
                    </a>
                    <a href="tencent://AddContact/?fromId=50&amp;fromSubId=1&amp;subcmd=all&amp;uin=2237696522"
                       class="tooltipped" target="_blank" data-tooltip="QQ联系我: 2237696522" data-position="top"
                       data-delay="50">
                        <i class="fab fa-qq"></i>
                    </a>

                </div>-->
        </div>
    </div>

</div>


{/block}

{block name="content"}
<!--main begin-->
<main class="content" style="min-height: 701px;">

    <!--推荐文章-->
    {if $p}
    <div id="indexCard" class="index-card">
        <div class="container ">
            <div class="card">
                <div class="card-content">
                    <div id="recommend-sections" class="recommend">

                        <div class="title"><i class="far fa-thumbs-up"></i>&nbsp;&nbsp;推荐文章</div>

                        <div class="row">


                            {volist name='recommend' id="v"}
                            <div class="col s12 m6">

                                <div class="post-card" style="background-image: url({empty name="$v.img_url"} assets/img/frontend/123.jpg {else /} {$v.img_url} {/empty} )">
                                <div class="post-body">
                                    <div class="post-categories">
                                        <a href="{$v.cates.url}" target="_blank" class="category">{$v.cates.name}</a>
                                    </div>
                                    <a href="{$v.url}" target="_blank">
                                        <h3 class="post-title">{$v.title}</h3>
                                    </a>
                                    <p class="post-description  block-with-text">
                                        {$v.description}
                                    </p>
                                    <a href="{$v.url}" class="read-more btn waves-effect waves-light categary_color" target="_blank">
                                        <i class="icon far fa-eye fa-fw"></i>阅读更多
                                    </a>
                                </div>
                            </div>
                        </div>

                        {/volist}

                    </div>

                </div>

            </div>
        </div>
    </div>
    </div>
    {/if}
    <!--推荐文章-->


    <!-- 所有文章卡片 -->
    <article id="articles" class="container articles" style="position: relative; height: 1648px;">
        <div class="row article-row">

            <!--list-->


            {volist name='list' id="v"}
            <div class="article col s12 m6 l4 aos-init" data-aos="zoom-in" style="position: absolute; left: 0px; top: 0px;">
                <div class="card">
                    <a href="{$v.url}" target="_blank">
                        <div class="card-image">
                            <img src="{empty name="$v.img_url"} assets/img/frontend/123.jpg {else /} {$v.img_url} {/empty}" class="responsive-img" alt="{$v.title}">
                            <span class="card-title">{$v.title}</span>
                        </div>
                    </a>

                    <div class="card-content article-content">
                        <div class="summary block-with-text">
                            {$v.description}
                        </div>
                        <div class="publish-info">
                                <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>{$v.createtime}
                            </span>
                            <span class="publish-author">
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                <a href="{$v.cates.url}" target="_blank" class="post-category">
                                    {$v.cates.name}
                                </a>
                            </span>
                        </div>
                    </div>
                    <div class="card-action article-tags">
                        <?php  $arr=@explode(",",$v['keywords']); foreach($arr as $a){ ?>
                        <a href="/tag_show/{$a}" target="_blank"><span class="chip bg-color">{$a}</span></a>
                        <?php } ?>

                    </div>

                </div>
            </div>
            {/volist}

            <!--list-->
        </div>
    </article>

</main>

<div class="container paging">
    <div class="row" style="text-align: center">
        {$page|raw}
    </div>
</div>

<!--main end-->
<script>
    $(function () {
        $(".categary_color").each(function (i) {
            $(this).css({"background": rgb(130,224,170)});
        })
    });
</script>

{/block}
